<template>
  <div class="page">
    <div v-if="!userStore.isLogin" class="m-b-30 login-box" @click="goto('/login')">登录</div>
    <div v-else class="m-b-30 login-box">
      <p>{{ userStore?.orgnow?.orgnowname }}</p>
      <p>{{ userStore?.orgnow?.orgnowcode }}</p>
      <p class="m-t-50 m-b-50" @click="userStore.logOut()">退出</p>
    </div>

    <div class="demo-block">
      <van-row gutter="10">
        <van-col span="12" class="block" @click="goto('/finance')">财务类</van-col>
        <van-col span="12" class="block" @click="goto('/assets')">资产类</van-col>
        <van-col span="12" class="block" @click="goto({ name: 'contract', query: { type: 1 } })">收入类合同类</van-col>
        <van-col span="12" class="block" @click="goto({ name: 'contract', query: { type: 2 } })">支出类合同类</van-col>
        <van-col span="12" class="block" @click="goto('/xzqh')">行政区划</van-col>
        <van-col span="12" class="block" @click="goto('/formtest')">form表单</van-col>
        <van-col span="12"></van-col>
      </van-row>
    </div>
    <div class="demo-block">
      <van-row gutter="10">
        <van-col span="12" class="block" @click="goto('/usestorage')">sessionStorage</van-col>
        <van-col span="12" class="block" @click="goto('/listpage')">滚动分页</van-col>
        <van-col span="12" class="block" @click="openNewsDetail()">新闻详情</van-col>
        <van-col span="12" class="block" @click="gotoLink('http://wwww.baidu.com')">外链</van-col>
        <van-col span="12" class="block" @click="goto('/map')">地图</van-col>
      </van-row>
    </div>

    <div class="demo-top-left">
      <p>app: {{ appOrgName }} {{ appOrgCode }}</p>
      <p v-if="userStore.isLogin">user: {{ userStore.user?.orgname }} {{ userStore.user?.orgcode }}</p>
    </div>

    <div class="demo-pop-text">
      <span @click="openPop()">右侧窗</span>
    </div>

    <!--右侧pop窗-->
    <van-popup v-model:show="popShow" position="right" duration="0.2" class="pop-page-100" @open="onOpen">
      <div class="pop">
        <du-nav-bar title="pop窗口" inpop @back="popShow = false"></du-nav-bar>
        <pop-page :image-list="imageList"></pop-page>
      </div>
    </van-popup>

    <!--新闻详情弹窗-->
    <van-popup v-model:show="newsDetailShow" position="right" duration="0.2" class="pop-page-100" @open="onOpen">
      <div class="pop">
        <du-nav-bar title="新闻详情" inpop @back="newsDetailShow = false"></du-nav-bar>
        <du-news-detail :new-item="newItem"></du-news-detail>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import popPage from './popPage.vue'
import { Toast } from 'vant'

const imgs = [
  'https://pic.ntimg.cn/file/20200211/5729105_204006165087_2.jpg',
  'https://pic.ntimg.cn/file/20190909/5729105_161722007480_2.jpg',
  'https://pic.ntimg.cn/file/20190718/5729105_143115911766_2.jpg',
  'https://pic.ntimg.cn/file/20190716/5729105_171030059823_2.jpg',
  'https://pic.ntimg.cn/file/20190716/5729105_170810823965_2.jpg',
  'https://pic.ntimg.cn/file/20190716/5729105_171238680474_2.jpg',
  'https://pic.ntimg.cn/file/20190716/5729105_171354615776_2.jpg',
  'https://pic.ntimg.cn/20130522/5729105_151152918000_2.jpg',
]
const { appOrgCode, appOrgName } = useGlobal()
const { goto, gotoLink } = useGoto()
const { userStore } = useStore()

const popShow = ref(false)
const newsDetailShow = ref(false)
const imageList = ref(imgs)

const newItem = {
  title: '农村基层干部廉洁履行职责若干规定（试行）',
  author: 'admin',
  addtime: '2022-11-14',
  contents: `
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
<p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p><p>sdfasdfasdfasd</p>
`,
  fj: [
    {
      uname: '相关文献',
      href: 'https://pic.ntimg.cn/file/20200211/5729105_204006165087_2.jpg',
    },
    {
      uname: '附件1',
      href: 'https://pic.ntimg.cn/file/20190909/5729105_161722007480_2.jpg',
    },
  ],
}

const openPop = () => {
  popShow.value = true
}
const openNewsDetail = () => {
  newsDetailShow.value = true
}

const onOpen = () => {}

const showToast = () => {
  Toast('toast')
}
</script>

<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 300px;
}
.demo-block {
  width: 100%;
  padding: var(--app-padding);
  box-sizing: border-box;
  margin-bottom: 20px;
  .block {
    height: 100px;
    line-height: 100px;
    color: #fff;
    text-align: center;
    background-color: var(--app-primary-color);
    background-clip: content-box;
    margin-bottom: var(--app-padding);
  }
}
.demo-pop-text {
  position: absolute;
  right: var(--app-padding);
  top: var(--app-padding);
}
.demo-top-left {
  position: absolute;
  left: var(--app-padding);
  top: var(--app-padding);
}
.login-box {
  text-align: center;
}
</style>
